<template>
  <div class="split-pane-page-wrapper">
    <split-pane v-model="offset" @on-moving="handleMoving">
      <div slot="left" class="pane left-pane">
        <split-pane
          v-model="offsetVertical"
          mode="vertical"
          @on-moving="handleMoving"
        >
          <div slot="top" class="pane top-pane"></div>
          <div slot="bottom" class="pane bottom-pane"></div>
          <div slot="trigger" class="custom-trigger">
            <icons
              class="trigger-icon"
              :size="22"
              type="resize-vertical"
              color="#fff"
            />
          </div>
        </split-pane>
      </div>
      <div slot="right" class="pane right-pane"></div>
    </split-pane>
  </div>
</template>

<script>
import SplitPane from "_c/split-pane";
import Icons from "_c/icons";
export default {
  name: "split_pane_page",
  components: {
    SplitPane,
    Icons,
  },
  data() {
    return {
      offset: 0.6,
      offsetVertical: "250px",
    };
  },
  methods: {
    handleMoving(e) {
      console.log(e.atMin, e.atMax);
    },
  },
};
</script>

<style lang="less">
.center-middle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.split-pane-page-wrapper {
  height: 600px;
  .pane {
    width: 100%;
    height: 100%;
    &.left-pane {
      background: sandybrown;
    }
    &.right-pane {
      background: palevioletred;
    }
    &.top-pane {
      background: sandybrown;
    }
    &.bottom-pane {
      background: palevioletred;
    }
  }
  .custom-trigger {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000000;
    position: absolute;
    .center-middle;
    box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
    i.trigger-icon {
      .center-middle;
    }
  }
}
</style>